@font-face {
  font-family: 'Tee Frank Heavy';
  src: url('../fonts/Tee-Franklin-Heavy-Oblique.eot');
  src:  
       url('../fonts/Tee-Franklin-Heavy-Oblique.eot?#iefix') format('embedded-opentype'),                     
       url('../fonts/Tee-Franklin-Heavy-Oblique.otf') format('opentype'),    
       url('../fonts/Tee-Franklin-Heavy-Oblique.woff') format('woff'),                     
       url('../fonts/Tee-Franklin-Heavy-Oblique.woff2') format('woff2');
}


:root {
  --ghc-orange: rgb(226, 66, 45);
  --ghc-red: #EE2E24;
  --dark: #231E1F;
}

/*===============
  ATOMS
================*/

p {
  font-size: 14px;
  line-height: 1.5em;
  margin: 0 0 14px 0;
}

a {
  text-decoration: none; }
a:hover { color: var(--ghc-red) }

a.button {
  font: 14px 'Tee Frank Heavy', sans-serif;
  text-transform: uppercase;
  color: white;
  padding: 7px 21px 5px 21px;
  border: 2px solid white;
  border-radius: 4px;
  min-width: 49%;
  margin-right: 1%;
  text-align: center;
  display: block;
  box-sizing: border-box;
  transition: background 0.2s, border-color 0.2s, color 0.2s;
  float: left }
a.button:hover {
  background: white;
  border-color: white;
  color: var(--dark) }
 a.button.large { 
   font-size: 16px;
   padding: 14px 28px }
 a.button.full {
   width: 100%; }
 a.button.solid {
  background: var(--ghc-orange);
  color: white;
  border-color: var(--ghc-orange) }
a.button.solid:hover {
  color: white;
  border-color: var(--dark);
  background: var(--dark) }
 a.button.dark {
  background: var(--dark);
  border-color: var(--dark) }
 a.button.dark:hover {
   background: var(--ghc-orange);
   color: white }
 a.button.center {
  min-width: 115px;
  max-width: 250px;
  display: block;
  float: none;
  text-align: center;
  margin: auto }
 a.button.grey {
   color: white;
   background: #A3A3A3;
   border-color: #A3A3A3 }
 a.button.grey:hover {
   background: #666;
   border-color: #666 }

a.button .fa { position: relative; top: 1px }

a.button .fa-chevron-left { margin-right: 14px }
a.button .fa-chevron-right { margin-left: 14px }


@media screen and (min-width: 660px) {
  a.button {
    width: auto;
    min-width: auto;
    display: inline-block;
    text-align: right }
}

ul.checklist {
  list-style-type: none;
  padding: 0; margin: 0 }
  ul.checklist li {
    position: relative;
    padding: 0 0 0 28px;
    margin: 7px 0 }
  ul.checklist li:before {
    content: "\f14a";

    position: absolute;
    left: 0; top: 3px;
    font-family: FontAwesome;
    color: var(--ghc-orange) }

input, textarea, button {
  border: 0;
  padding: 5px 3px 7px 3px;
  box-sizing: border-box;
  border-bottom: 1px solid #333;
  display: block;
  margin-bottom: 14px;
  max-width: 100%;
  background: #EEE;
  width: 100% }
input:focus, textarea:focus {
  outline: none;
  background: lightblue;
  border-bottom: 1px solid var(--ghc-orange) }

textarea {
  min-width: 100%;
  min-height: 100px }

input[type="submit"], button {
  border-radius: 2px;
  border:2px solid #666;
  color: #666;
  text-transform: uppercase;
  text-align: right;
  padding-right: 14px;
  font: 12px 'Tee Frank Heavy', sans-serif;
  font-style: italic }
input[type="submit"]:hover, button:hover {
  cursor: pointer;
  background: #666;
  color: white }

label {
  font: 12px 'Tee Frank Heavy', sans-serif;
  text-transform: uppercase;
  color: #333;
  display: block;
  width: 100%;
  margin-bottom: 2px;
  border-bottom: 1px solid #333 }
/*===============
  TEMPLATES
================*/

/* dev
====== */
html:before {
  content: 'mobile screen no media query';
  display:none;
  padding: 2px 4px;
  position: fixed;
  top: 2px; left: 2px;
  background-color: grey }



html, body { padding: 0; margin: 0 }

html {
  font-family: 'PT Sans', sans-serif }

body { background: white }

h1, h2, h3, h4, h5, h6 {
  padding: 7px 0 0 0;
  margin: 0;
  font-weight: 500;
  font-family: 'Tee Frank Heavy', sans-serif }

h1 {}
h2 {
  font-size: 22px }
h3 {
  font-size: 18px }
h4 {
  font-size: 16px }
h5 {
  font-size: 14px }
h6 {
  font-size: 12px }

h2.sub, h3.sub, h4.sub {
  margin: 0;
  color: #A3A3A3 }
  

body {
   }

.container {
  max-width: 990px;
  width: 98%;
  padding: 14px;
  box-sizing: border-box;
  margin: 0 auto;}

.brand .container { padding: 14px 0 }
.brand .logo, .brand .nav { padding: 0 14px }

@media screen and (min-width: 990px) {
  .brand .logo, .brand .nav { padding: 0 }
}

.container.slim { padding: 7px 14px }

.flex-halfs.allscreens,
.flex-thirds.allscreens,
.flex-fifths.allscreens { display: flex }
.flex-halfs.allscreens .half {
  box-sizing: border-box;
  width: 50% }
 .flex-halfs.allscreens .half:first-child { padding-right: 14px }
 .flex-halfs.allscreens .half:last-child { padding-left: 14px }

.flex-thirds.allscreens .third {
  box-sizing: border-box;
  width: calc(100% / 3) }
.flex-thirds.allscreens .two-thirds {
  width: calc(100% / 3 * 2) }

.flex-fifths.allscreens .fifth {
  width: 20% }
.flex-fifths.allscreens .two-fifths {
  width: 40% }
.flex-fifths.allscreens .three-fifths {
  width: 60% }
.flex-fifths.allscreens .four-fifths {
  width: 80% }

/* tablet screen size
   ============= */

@media screen and (min-width: 660px) {
  
  html:before { content: 'tablet screen min-width: 720px'; background-color: lightgreen }

  .container { max-width: 660px }
  
  .flex-halfs {
    width: 100%;
    display: flex }

  .flex-halfs .half {
    width: 50% }
   .flex-halfs .half:first-child { padding-right: 14px }

  .flex-halfs .half:last-child { padding-left: 14px }


  .flex-thirds, .flex-fifths {
    width: 100%;
    display: flex }
  
  .flex-thirds .third {
    width: calc(100% / 3) }
  .flex-thirds .two-thirds {
    width: calc(100% / 3 * 2) }

  .flex-fifths .fifth {
    width: 20% }
  .flex-fifths .two-fifths {
    width: 40% }
  .flex-fifths .three-fifths {
    width: 60% }
  .flex-fifths .four-fifths {
    width: 80% }
  
}

@media screen and (min-width: 720px) {
  .container { max-width: 700px }
}

@media screen and (min-width: 820px) {
  .container { max-width: 800px }
}


/* full screen size 
   ============= */
@media screen and (min-width: 990px) {
  html:before { content: 'full screen min-width: 990px'; background-color: lightblue }
  
  .container { max-width: 990px }
  
  .flex-halfs .half {
    width: 495px }
  .flex-thirds .third {
    width: 330px }
  .flex-thirds .two-thirds {
    width: 660px }

  .flex-fifths .fifth {
    width: 198px }
  .flex-fifths .two-fifths {
    width: 396px }
  .flex-fifths .three-fifths {
    width: 594px }
  .flex-fifths .four-fifths {
    width: 792px }
}

/*===============
  MOLECULES
================*/

.nav-click {
  padding: 5px 12px;
  border-radius:2px;
  background: var(--ghc-orange);
  color: white;
  font-size: 30px;
  position: absolute;
  top: 28px; right: 14px;
  cursor: pointer;
}


@media screen and (min-width: 660px) {
  .nav-click { display: none }
}

.nav {
  margin-top: 14px;
  text-transform: uppercase;
  background: var(--dark) }
.nav[data-state="show"] { display: block }
.nav[data-state="hide"] { display: none }
ul.navlinks {
  list-style-type: none;
  padding: 0;
  position: relative;
  color: white;
  font-weight: normal;
  white-space: nowrap;
  margin: 0 }
  ul.navlinks li {}
    ul.navlinks li a {
      transition: color 0.2s ease-in-out;
      display: block;
      color: inherit;
      font-weight: inherit;
      text-decoration: none;
      padding: 14px }
    ul.navlinks li a:hover { color: var(--ghc-red) }
    ul.navlinks li:not(:last-child) a { border-bottom: 1px solid rgba(255, 255, 255, 0.8) } 

.about ul.navlinks li a[href="/about-us"] { color: var(--ghc-red) }
.services ul.navlinks li a[href="/services"] { color: var(--ghc-red) }
.projects ul.navlinks li a[href="/projects"] { color: var(--ghc-red) }
.contact ul.navlinks li a[href="/contact-us"] { color: var(--ghc-red) }
.homepage ul.navlinks li a[href="/"] { color: var(--ghc-red) }

@media screen and (min-width: 660px) {
  .nav { margin-top: 21px; }
  .nav[data-state="hide"] { display: block }
  ul.navlinks {
    background: transparent;
    color: #333;
    font-weight: normal;
    font-size: 13px;
    float: right;
  }
  ul.navlinks li {
    border-right: 1px solid rgba(0, 0, 0, 0.3);
    display: inline-block }
    ul.navlinks li:last-child { border-right: none }
    ul.navlinks li a { padding: 4px 8px }
}

@media screen and (min-width: 820px) {
  ul.navlinks {
    font-size: 14px }
}

.header .binder ul.weblinks {
  list-style-type: none;
  display: flex;
  margin: 0; padding: 0 }
  .header .binder ul.weblinks li {
    display: inline-block;
    font-size: 14px }
  .header .binder ul.weblinks li a {
    text-decoration: none;
    display: block;
    padding: 14px;
    color: inherit }
   .header .binder ul.weblinks li a:hover { color: var(--ghc-red) }

.header .binder ul.weblinks.right {
  flex-direction: row-reverse }
    .header .binder ul.weblinks.left li {
      border-right: 1px solid rgba(0, 0, 0, 0.05) }
    .header .binder ul.weblinks.right li {
      border-left: 1px solid rgba(0, 0, 0, 0.05) }

.map {
  width: 100%;
  border: 1px solid #999;
  border-radius: 2px }

/*===============
  ORGANISMS
================*/

.header {}

.header .binder {
  display: none;
  background:#FAFAFA;
  font-size: 10px;
  font-weight: 100;
  border-bottom: 1px solid rgba(0, 0, 0, 0.05);
  color: #C3C3C3 }
  .header .binder .container {
    border-right: 1px solid rgba(0, 0, 0, 0.05);
    border-left: 1px solid rgba(0, 0, 0, 0.05) }
  
    .header .binder ul.weblinks.left { display: none }

body:before {
  content: ' '; display: block;
  width: 100%;
  height: 3px;
  background: #FAFAFA;
  border-bottom: 1px solid rgba(0, 0, 0, 0.1) }

/* show social links */ 
@media screen and (min-width: 820px) {
  .header .binder ul.weblinks.left { display: flex }
}
@media screen and (min-width: 660px) {
  .header .binder ul.weblinks.right { width: 100% }
}
/* show binder */ 
@media screen and (min-width: 660px) {
  .header .binder { display: block }
  body:before { display: none }
}

.header .brand {
  min-height: 96px;
  background: white }

.header .brand .logo { width: 260px }
  .header .brand .logo img {
    margin: auto;
    display: block;
    width: 100% }

.header .brand .nav {
  
}

.content .content-subhead {
  border-top: 1px solid rgba(0, 0, 0, 0.1);
  border-bottom: 1px solid rgba(0, 0, 0, 0.1);
  background: url('../img/og-blueprint.jpg') repeat; }
  .content .content-subhead .container {}
  .content .content-subhead h2 {
    margin: 14px 0 }

.content .content-subhead .breadcrumbs {
  text-align: right;
  text-transform: uppercase;
  position: relative;
  display: none;
  top: 26px;
  font: 14px 'Tee Frank Heavy', sans-serif }
  .content .content-subhead .breadcrumbs a {
    color: var(--ghc-orange) }

@media screen and (min-width: 660px) {
  .content .content-subhead .breadcrumbs {
    display: block;
    float: right }
}

.content .content-page {
  background: white;
}


.content .content-page p {
  font-size: 16px;
  line-height: 1.5em;
}

.footer {
  text-align: center;
  padding: 28px 0;
  background: var(--dark);
  color: #FAFAFA }


.slider {}
.slider {
  width: 100%;
  position: relative;
  overflow: hidden }

.slider .fiveslides {
  display: flex;
  position: relative;
  /* left: -100%; set at 0 in html */
  transition: left 0.5s ease-in-out;
  width: 500% }


.slider .slide-nav {
  position: absolute;
  width: 50px;
  height: 50px;
  z-index: 1000;
  top: 45%;
  cursor: pointer;
  font-size: 34px;
  font-weight: bold;
  color: transparent;
  display:none;
  transition: color 0.2s ease-in-out }
.slider .slide-nav i { font-weight: bold }
.slider:hover .slide-nav { color: white }
@media screen and (min-width: 660px) {
  .slider .slide-nav { display: block }
}

.slider #prev-click { left: 35px }

.slider #next-click { right: 35px }

.slider .slide {
  overflow:hidden;
  position: relative }
 .slider .fiveslides .slide { width: 20% }
  .slider .slide img {
    display: block;
    width: 130% }
  .slider .slide .slide-content {
    position: absolute;
    top: 10% }
  .slider .slide .container { padding: 0 }
  .slider .slide h2 {
    font-size: 5vw;
    color: #221E1F;
    text-shadow: 1px 1px rgb(168,168,168) }
  .slider .slide h4.sub {
    padding: 0;
    color: var(--ghc-orange);
    font-size: 2.6vw;
    letter-spacing: 1px;
    text-shadow: 1px 1px #574e4f;
    font-weight: bold;
    font-family: 'PT Sans', sans-serif;
    text-transform: uppercase }
  .slider .slide p {
    color: white;
    line-height: 2.5vw;
    margin: 1vw 0;
    font-size: 2vw }
  
  .slider .slide .button {}
  
@media (min-width: 820px) {
  .slider .slide h2 { font-size: 36px }
  .slider .slide h4.sub { font-size: 18px }
  .slider .slide p { line-height: 25px; font-size: 17px }
}

.dark-banner {
  background: var(--dark);
  margin: 0;
  padding: 28px;
  text-align: center;
  font-size: 26px;
  color: white }

ul.projects {
  list-style-type: none;
  display: flex;
  flex-wrap: wrap;
  padding: 0;
  margin: 0 }
  ul.projects li {
    width: 49%;
    margin: 7px 0.5%;
    box-sizing: border-box;
    position: relative;
    overflow: hidden;
    text-align: center;
    border: 2px solid black }
    ul.projects li a {
      display: block }
    ul.projects li a img {
      display: block;
      width: 100% }
    ul.projects li a h4 {
      position: absolute;
      bottom: 0; left: 0; right: 0;
      opacity: 1.0;
      transition: opacity 0.2s ease-in-out;
      height: 25%;
      padding: 14px;
      background: rgba(0, 0, 0, 0.6);
      color: white;
      display: flex;
      align-items: center;
      font: 14px 'Tee Frank Heavy', sans-serif;
    }

.homepage ul.projects {
  border-bottom: 4px solid var(--dark); }
.homepage ul.projects li {
  width: 50%;
  margin: 0;
  border: 0 }
.homepage ul.projects li:last-child { display: none }

@media screen and (min-width: 660px) {
  .homepage ul.projects { border: 0 }
  ul.projects li {
    text-align: left;
    width: 24% }
  .homepage ul.projects li {
    border: 0;
    margin: 0;
    width: 25%; }
}

@media screen and (min-width: 990px) {
  .homepage ul.projects li:last-child { display: block }
  .homepage ul.projects li { width: 20%; }
  ul.projects li {}
    ul.projects li:not(:hover) a h4 {
      opacity: 0.0;
      bottom: 0; }
  

}



/*===============
  PAGES
================*/

/* all pages */


.homepage {}

  .home-services { position: relative }
  .home-services img {
    width: 100%;
    display: block }
  .home-services .text {
    color: white;
    width: 100%;
    position: absolute;
    top: 35%; }
    .home-services .text h2,
    .home-services .text a {
      text-align: center }
    .home-services .text h2 {
      font-size: 4vw;
      margin-bottom: 2vw;
      text-shadow: 1px 1px #333 }

.about {}

.about .profile {
  box-sizing: border-box;
}

.about .profile img {
  margin: 0 auto;
  margin-bottom: 14px;
  width: 100%;
  border: 1px solid white;
  outline: 3px solid #A3A3A3;
  display: block }

.about .profile h3,
.about .profile h4 {   }

.about .profile h4.sub {
  border-bottom: 1px solid #333;
  color: var(--ghc-orange) }

.about .profile h3,
.about .profile h4 { padding: 3px 0 }

.about .profile p {
  margin: 0;
  padding: 7px 0 }

.services {}

.projects {}

.projects .project {}

  .projects .project img.example {
    width: 100%;
    border: 1px solid var(--dark);
    border-radius: 2px;
    margin-bottom: 14px;
    display: block }

  .projects .project .desc {
    padding-left: 21px;
    box-sizing: border-box }
    .projects .project .desc h3 {
      margin-bottom: 14px;
      border-bottom: 2px solid #333 }
    .projects .project .desc p {}
    .projects .project .desc ul.checklist {
      margin-bottom: 21px }
    .projects .project .desc iframe {
      border: 1px solid var(--dark) }

  .projects .project .more-projects {
    padding-left: 21px;
    margin-top: 35px }

.projects .project .video-wrapper {
  position: relative;
  overflow: visible;
  z-index: 1000;
  padding-bottom: 56.25%; /* 16:9 */
  height: 0;
  box-sizing: border-box;
  margin-bottom: 14px }
  .projects .project .video-wrapper iframe {
    height: 100%;
    left: 0;
    position: absolute;
    top: 0;
    width: 100%;
    z-index: 1009
    box-sizing: border-box }

.contact {}

.contact .content p { font-size: 16px }

/*===============
  FINAL SAY
================*/

.no-pad, .nopad { padding: 0 }